<template>

    <div class="container">

        <!--查询部分-->
        <!--inline=true水平摆放form表单-->
        <el-form :inline="true" v-model="menuQueryForm">
            <el-form-item size="small" label="菜单名称">
                <el-input clearable v-model="menuQueryForm.name" placeholder="请输入菜单名称"></el-input>
            </el-form-item>

            <el-form-item size="small" label="菜单状态">
                <el-select clearable v-model="menuQueryForm.status" placeholder="菜单状态">
                    <el-option :key="index" v-for="(item,index) in $dictMap('status')" :label="item.desc" :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item size="mini">
                <el-button @click="queryMenuTree(menuQueryForm)" style="width: 80px" type="primary"><i
                    class="iconfont icon-search-line"/><span>查询</span>
                </el-button>
            </el-form-item>

            <el-form-item size="mini">
                <el-button style="width: 80px" type="normal"><i class="iconfont icon-zhongzhi-"/><span>重置</span>
                </el-button>
            </el-form-item>

            <el-form-item size="mini">
                <el-button plain style="width: 80px" type="primary" @click="addMenuView"><i
                    class="iconfont icon-jia"/><span>新增</span></el-button>
            </el-form-item>
        </el-form>
        <!--查询部分-->


        <!--菜单列表 表格部分-->
        <el-table
            :header-cell-style="{'text-align':'center',background:'#f8f8f9',color:'#606266'}"
            :cell-style="{'text-align':'center'}"
            :data="menuTreeData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'childMenu', hasChildren: 'hasChildren'}">
            <el-table-column
                prop="name"
                label="菜单名称"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                label="图标"
                width="100">
                <template slot-scope="scope">
                    <i :class="scope.row.iconUrl"></i>
                </template>
            </el-table-column>
            <el-table-column
                prop="sort"
                sortable
                width="100"
                label="排序">
            </el-table-column>
            <el-table-column
                prop="routerUrl"
                label="路由地址">
            </el-table-column>
            <el-table-column
                prop="component"
                label="组件">
            </el-table-column>
            <el-table-column
                width="80"
                prop="nodeType"
                label="类型">
                <template slot-scope="scope">
                    <span>{{ $dictMapDesc('menu_node_type',scope.row.nodeType) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="level"
                label="等级">
            </el-table-column>
            <el-table-column
                    prop="status"
                label="状态">
                <template slot-scope="scope">
                    <span>{{ $dictMapDesc('status',scope.row.status) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                width="200"
                label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editMenu(scope.row,scope.$index)"
                               round>编辑
                    </el-button>
                    <el-button size="mini" type="danger" @click="delMenu(scope.row)" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--菜单列表 表格部分-->

        <!--添加菜单 dialog-->
        <el-dialog @close="closeDialog" :title="dialogName" :visible.sync="addMenuVisible">
            <!--label-width 表单里面label的标签-->
            <el-form class="myform" :inline="true" ref="menuForm" :rules="rules" :model="menuForm">
                <el-form-item prop="parentId" label="上级菜单">
                    <!--这里是引用的第三方组件-->
                    <el-select-tree
                        :check-strictly="true"
                        :clearable="true"
                        style="width:100%"
                        placeholder="请选择上级菜单"
                        :props="{ value: 'id', label: 'name', children: 'childMenu' }"
                        :data="menuTreeData"
                        v-model="menuForm.parentId"
                    ></el-select-tree>
                </el-form-item>

                <el-form-item prop="nodeType" label="菜单类型">
                    <el-radio-group v-model="menuForm.nodeType">
                        <el-radio :key="index" v-for="(item,index) in $dictMap('menu_node_type')" :label="item.value">{{item.desc}}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-if="menuForm.nodeType===3" class="fullWidthFormItem" prop="iconUrl" label="绑定接口">
                    <el-input v-model="menuForm.bindUrl"></el-input>
                </el-form-item>

                <!--<div style="display: flex;justify-content: start">-->
                <el-form-item prop="iconUrl" label="菜单图标">
                    <el-input v-model="menuForm.iconUrl"></el-input>
                </el-form-item>


                <el-form-item prop="name" label="菜单名称">
                    <el-input v-model="menuForm.name"></el-input>
                </el-form-item>
                <!--</div>-->

                <el-form-item prop="sort" label="显示排序">
                    <el-input-number v-model="menuForm.sort" controls-position="right" :min="1"
                                     :max="15"></el-input-number>
                </el-form-item>

                <el-form-item prop="status" label="菜单状态">
                    <el-radio :key="index" v-for="(item,index) in $dictMap('status')" v-model="menuForm.status" :label="item.value">{{item.desc}}</el-radio>
                </el-form-item>


                <el-form-item prop="routerUrl" label="路由地址">
                    <el-input v-model="menuForm.routerUrl"></el-input>
                </el-form-item>

                <el-form-item prop="component" label="组件路径">
                    <el-input v-model="menuForm.component"></el-input>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="oprMenu">确 定</el-button>
            </div>
        </el-dialog>
        <!--添加菜单 dialog-->
    </div>

</template>

<script>

import authenticate from "../../util/permissionUtil";

export default {
    inject: ["mainReload"],
    name: "Menu",
    data() {
        return {
            authenticate(name) {
                return authenticate(this.$route.path,name)
            },

            //树形菜单数据
            menuTreeData: [],
            //'添加菜单dialog'是否显示
            addMenuVisible: false,
            //添加菜单数据
            menuForm: {},
            //菜单列表查询参数
            menuQueryForm: {name: null, status: null},
            //添加、编辑框标题
            dialogName: '',

            rules: {
                name: [
                    {required: true, message: '菜单名称不能为空', trigger: 'blur'}
                ],
                sort: [
                    {required: true, message: '菜单排序不能为空', trigger: 'blur'}
                ],
                status: [
                    {required: true, message: '菜单状态不能为空', trigger: 'blur'}
                ]
            },

            // menuNodeTypes:this.$dictMap("menu_node_type"),
            // status:this.$dictMap("status")
        };
    },
    created() {
        //初始化从vuex中获取菜单数据,data是vuex里的值
        //this.$vuexApi.getAllMenu((data)=>{
        //    this.menuTreeData = data
        //})
        // this.$get("dict/getDictByType", {type: "menu_node_type"}).then(({data}) => {
        //     this.menuNodeTypes = data
        // });

        this.$axiosApi.getMenuTree(null, (data) => {
            this.menuTreeData = data
        })
    },
    computed: {

    },

    methods: {
        init() {
            this.menuForm = {
                nodeType:this.$dictMapDefault('menu_node_type'),
                status:this.$dictMapDefault('status')
            }
        },

        closeDialog() {
            this.addMenuVisible = false;
            this.$nextTick(() => {
                this.$refs['menuAddForm'].clearValidate()
            })
        },

        addMenuView() {
            this.addMenuVisible=true;
            this.dialogName='添加菜单'
            this.init()
        },

        /**
         * @描述
         * @param row,index,index可以用来修改内存中当前选中数据，目前这里不需要
         * @码农 丁昌江
         * @日期 2021/2/19 9:40
         */
        editMenu(row, index) {
            //如果使用引用赋值，那么当修改编辑框上的数据时会导致列表数据实时修改，且取消编辑时，列表数据也不会恢复
            this.menuForm = JSON.parse(JSON.stringify(row))
            this.addMenuVisible = true;
            this.dialogName = '编辑菜单';
            //this.menuForm.index = index;
        },

        /**
         * @描述 查询菜单树
         * @码农 丁昌江
         * @日期 2021/1/31 19:16
         */
        queryMenuTree(menuQueryForm) {
            this.$get("/menu/getMenuTree", menuQueryForm).then(({data}) => {
                this.menuTreeData = data;
            });
        },


        /**
         * @描述  添加、编辑框 点击确认的时候
         * @码农 丁昌江
         * @日期 2021/2/18 15:31
         */
         oprMenu() {
            this.$refs['menuForm'].validate(async (valid)=>{
                if (!valid) {
                    return false
                }

                // 如果没有id，那么就是新增，否则就是编辑
                if (!this.menuForm.id) {
                    await this.$post("/menu/addMenu", this.menuForm);
                } else {
                    await this.$put("/menu/editMenu", this.menuForm);
                }

                // 关闭编辑框
                this.addMenuVisible = false

                // 提示框
                this.$message({
                    message: "操作成功",
                    type: "success",
                })

                // 因为编辑的时候可能已经添加了id，记得要清除id
                this.menuForm.id = null;

                this.mainReload();
            })

        },


        delMenu(menu) {
            this.$confirm(`确定永久删除 '${menu.name}' 菜单吗？`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.$del("/menu/delMenu", {
                    id: menu.id
                }).then(() => {
                    this.$message("删除成功");
                    this.mainReload();
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: "已取消删除"
                });
            });

        }

    }
}
</script>

<style scoped>

</style>
